<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="编辑信息" />
        <view class="forms">
            <view class="card">
                <view class="item">
                    <view class="title required">姓名</view>
                    <input
                        type="text"
                        v-model="form.name"
                        placeholder="请输入您的姓名"
                    />
                </view>
                <view class="item">
                    <view class="title required">性别</view>
                    <picker
                        @change="bindPickerChange"
                        :value="index"
                        :range="array"
                    >
                        <view class="uni-input">{{ array[index] || "" }}</view>
                    </picker>
                </view>
                <view class="item">
                    <view class="title required">手机号</view>
                    <input
                        type="number"
                        v-model="form.mobile"
                        placeholder="请输入您的手机号"
                    />
                </view>
                <view class="item">
                    <view class="title required">意向工作城市</view>
                    <picker
                        @change="bindCityPickerChange"
                        :value="cityName"
                        :range="array1.map((item) => item.name)"
                    >
                        <view
                            class="uni-input"
                            :class="{ placeholder: !cityName }"
                        >
                            {{ cityName || "请选择" }}
                        </view>
                    </picker>
                </view>
                <view class="item">
                    <view class="title required">生日</view>
                    <picker
                        mode="date"
                        :value="form.birthday"
                        @change="bindDateChange"
                    >
                        <view
                            class="uni-input"
                            :class="{ placeholder: !form.birthday }"
                        >
                            {{ form.birthday || "请选择" }}
                        </view>
                    </picker>
                </view>
                <view class="item">
                    <view class="title required">从业年份</view>
                    <input
                        type="number"
                        v-model="form.practise_year"
                        placeholder="请输入您的从业年份"
                    />
                </view>
                <view class="item">
                    <view class="title required">所在地址</view>
                    <view
                        class="location flex align-center"
                        @click="getLocation"
                    >
                        <image
                            class="icon"
                            src="/static/static/technician/choose/location.png"
                            mode="scaleToFill"
                        />
                        <view class="location_input">
                            {{ form.address || "点击图标设置" }}
                        </view>
                    </view>
                </view>
            </view>

            <view class="card">
                <view class="item introduction">
                    <view class="title required" style="width: 100%">
                        服务师简介
                    </view>
                    <textarea
                        show-confirm-bar="false"
                        v-model="form.service_introduction"
                        maxlength="200"
                        placeholder="请输入服务师简介"
                    ></textarea>
                </view>
            </view>

            <view class="card">
                <view class="item">
                    <view class="title required">身份证号码</view>
                    <input
                        type="text"
                        v-model="form.id_card"
                        placeholder="请输入"
                    />
                </view>
            </view>

            <view class="card">
                <view class="item flex column">
                    <view class="title subTitle required">
                        身份证照片
                        <text class="tips">图片大小不能超过10M</text>
                    </view>
                    <view class="wrap box">
                        <view
                            class="upload"
                            v-if="!form.idcard_images || !form.idcard_images[0]"
                            @click="chooseImages('idcard_images', 0, 'arr')"
                        >
                            <view>
                                <image
                                    src="/static/static/technician/joinUs/upload.png"
                                    mode="scaleToFill"
                                />
                                <text>身份证人像面</text>
                            </view>
                        </view>
                        <view class="upImgs" v-else>
                            <image
                                class="upImg"
                                :src="$imageURL + form.idcard_images[0]"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="chooseImages('idcard_images', 0, 'arr')"
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>
                        <view
                            class="upload"
                            v-if="!form.idcard_images || !form.idcard_images[1]"
                            @click="chooseImages('idcard_images', 1, 'arr')"
                        >
                            <view>
                                <image
                                    src="/static/static/technician/joinUs/upload.png"
                                    mode="scaleToFill"
                                />
                                <text>身份证国徽面</text>
                            </view>
                        </view>
                        <view class="upImgs" v-else>
                            <image
                                class="upImg"
                                :src="$imageURL+form.idcard_images[1]"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="chooseImages('idcard_images', 1, 'arr')"
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>

                        <view
                            class="upload"
                            v-if="!form.idcard_images || !form.idcard_images[2]"
                            @click="chooseImages('idcard_images', 2, 'arr')"
                        >
                            <view>
                                <image
                                    src="/static/static/technician/joinUs/upload.png"
                                    mode="scaleToFill"
                                />
                                <text>手持身份证照片</text>
                            </view>
                        </view>
                        <view class="upImgs" v-else>
                            <image
                                class="upImg"
                                :src="$imageURL+form.idcard_images[2]"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="chooseImages('idcard_images', 2, 'arr')"
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card">
                <view class="item flex column">
                    <view class="title subTitle required">
                        资质证书
                        <text class="tips">图片大小不能超过10M</text>
                    </view>
                    <view class="wrap box">
                        <view
                            class="upImgs"
                            v-for="(item, index) in form.qualification_image"
                            :key="index"
                        >
                            <image
                                class="upImg"
                                :key="index"
                                :src="$imageURL+item"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="
                                    chooseImages(
                                        'qualification_image',
                                        index,
                                        'arr'
                                    )
                                "
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>
                        <view
                            class="upload"
                            v-if="
                                !form.qualification_image ||
                                !form.qualification_image.length < 15
                            "
                            @click="
                                chooseImages(
                                    'qualification_image',
                                    'null',
                                    'arr'
                                )
                            "
                        >
                            <image
                                src="/static/static/technician/joinUs/upload.png"
                                mode="scaleToFill"
                            />
                            <text>
                                点击上传({{
                                    form.qualification_image
                                        ? form.qualification_image.length
                                        : 0
                                }}/ 15)
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card">
                <view class="item flex column">
                    <view class="title subTitle required">
                        工作形象照
                        <text class="tips">图片大小不能超过10M</text>
                    </view>
                    <view class="wrap box">
                        <view
                            class="uploadF"
                            v-if="!form.work_image"
                            @click="chooseImages('work_image', 'null', 'str')"
                        >
                            <image
                                src="/static/static/technician/joinUs/upload.png"
                                mode="scaleToFill"
                            />
                            <text>点击上传</text>
                        </view>
                        <view class="upImgsF" v-else>
                            <image
                                class="upImg"
                                :src="$imageURL+form.work_image"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="
                                    chooseImages('work_image', 'null', 'str')
                                "
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card">
                <view class="item flex column">
                    <view class="title subTitle required">
                        生活照
                        <text class="tips">图片大小不能超过10M</text>
                    </view>
                    <view class="wrap box">
                        <view
                            class="upImgsF"
                            v-for="(item, index) in form.images"
                            :key="index"
                        >
                            <image
                                class="upImg"
                                :src="$imageURL+item"
                                mode="scaleToFill"
                            />
                            <view
                                class="uploadAgain"
                                @click="chooseImages('images', index, 'arr')"
                            >
                                <image
                                    src="/static/static/technician/joinUs/agin.png"
                                    mode="scaleToFill"
                                />
                                <view class="again">重新上传</view>
                            </view>
                        </view>
                        <view
                            class="uploadF"
                            v-if="!form.images || !form.images.length < 9"
                            @click="chooseImages('images', 'null', 'arr')"
                        >
                            <image
                                src="/static/static/technician/joinUs/upload.png"
                                mode="scaleToFill"
                            />
                            <text>
                                点击上传({{
                                    form.images ? form.images.length : 0
                                }}/ 9)
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card">
                <view class="item flex column">
                    <view class="title subTitle required">
                        个人视频
                        <text class="tips">视频大小不能超过10M</text>
                    </view>
                    <view class="wrap box">
                        <view class="uploadVideo" v-if="form.video_file">
                            <video
                                class="upVio"
                                v-if="form.video_file"
                                :src="form.video_file"
                                controls
                            />
                            <image
                                @click="chooseVideo('video_file', 'del')"
                                class="del"
                                src="/static/static/technician/joinUs/del.png"
                                mode="scaleToFill"
                            />
                        </view>
                        <view
                            class="uploadF"
                            v-if="!form.video_file"
                            @click="chooseVideo('video_file')"
                        >
                            <image
                                src="/static/static/technician/joinUs/upload.png"
                                mode="scaleToFill"
                            />
                            <text>上传视频</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="tips">
                编辑资料后进入重新审核，审核通过之前将显示原资料
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 提交 </view>
        </view>
    </div>
</template>
<script>
import { getCity } from "@/API/API/common.js";
import { getTechnicianInfo } from "@/API/API/technician.js";
import { editTechnician } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            form: {},
            cityName: "",
            array: ["女", "男"],
            index: 1,
            date: "",
            array1: [],
            foam: "",
        };
    },

    onLoad() {
        this.getCityData();
        this.getTechnicianInfo();
    },

    methods: {
        // 提交
        submit() {
            editTechnician(this.form)
                .then((res) => {
                    uni.showToast({ title: res.msg, icon: "none" });
                    uni.redirectTo({
                        url: "/subPages/technician/recruit/ToBeReviewed?type=back",
                    });
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },
        // 上传图片
        chooseImages(type, index, arrString) {
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                sourceType: ["album", "camera"],
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            if (index !== "null" && arrString == "arr") {
                                this.form[type][index] = JSON.parse(
                                    uploadFileRes.data
                                ).data.url;
                                this.$set(this.form, this.form);
                            } else if (index === "null" && arrString == "str") {
                                this.form[type] = JSON.parse(
                                    uploadFileRes.data
                                ).data.url;
                                this.$set(this.form, this.form);
                            } else if (index === "null" && arrString == "arr") {
                                this.form[type].push(
                                    JSON.parse(uploadFileRes.data).data.url
                                );
                                this.$set(this.form, this.form);
                            }
                        },
                    });
                },
            });
        },
        chooseVideo(type, type2) {
            if (type2 == "del") {
                this.form[type] = "";
                return;
            }
            uni.chooseVideo({
                sourceType: ["album", "camera"],
                maxDuration: 30,
                camera: "back",
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePath,
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            this.form[type] = JSON.parse(
                                uploadFileRes.data
                            ).data.url;
                        },
                    });
                },
            });
        },
        // 获取技师信息
        getTechnicianInfo() {
            getTechnicianInfo().then((res) => {
                res.data.idcard_images == null
                    ? (res.data.idcard_images = [])
                    : res.data.idcard_images;
                res.data.qualification_image == null
                    ? (res.data.qualification_image = [])
                    : res.data.qualification_image;
                res.data.images == null
                    ? (res.data.images = [])
                    : res.data.images;
                this.array1.forEach((item) => {
                    if (item.id == res.data.area_id) {
                        this.cityName = item.name;
                    }
                });
                this.form = res.data;
                this.index = res.data.gender;
            });
        },
        // 获取城市数据
        getCityData() {
            getCity().then((res) => {
                this.array1 = res.data;
            });
        },
        // 获取位置
        getLocation() {
            uni.chooseLocation({
                success: (res) => {
                    this.form.address = res.name + res.address;
                    this.form.lat = res.latitude;
                    this.form.lng = res.longitude;
                },
            });
        },
        bindPickerChange(e) {
            this.index = e.target.value;
            this.form.gender = this.index;
        },
        bindDateChange(e) {
            this.date = e.target.value;
            this.form.birthday = this.date;
        },
        bindCityPickerChange(e) {
            this.cityName = this.array1[e.target.value].name;
            this.form.area_id = this.array1[e.target.value].id;
        },
    },
};
</script>
<style lang="scss" scoped>
.forms {
    padding: 20rpx 20rpx 180rpx 20rpx;
    box-sizing: border-box;
    .item {
        padding: 25rpx 0;
        border-bottom: 2rpx solid #ececec;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
        font-size: 26rpx;
    }
    .introduction {
        text-align: left !important;
        display: flex;
        flex-direction: column !important;
        justify-content: center !important;
        height: 200rpx;
        textarea {
            width: 100%;
            height: 100%;
            font-size: 26rpx;
            margin-top: 20rpx;
        }
    }
    .title {
        font-size: 30rpx !important;
        font-weight: bold;
    }
    .subTitle {
        text-align: left !important;
        width: 100%;
    }
    .tips {
        font-size: 24rpx;
        color: #999;
        margin-left: 20rpx;
        font-weight: normal;
        text-align: center;
    }
    .box {
        display: flex;
        justify-content: space-start;
        width: 100%;
        flex-wrap: wrap;
        .uploadF {
            width: 200rpx !important;
            height: 200rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f7f7f7;
            margin: 20rpx 14rpx 0 0;
            image {
                width: 98rpx;
                height: 98rpx;
            }
            > view {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                > text {
                    line-height: 40rpx;
                }
            }
            > text {
                line-height: 40rpx;
            }
        }
        .upload {
            width: 300rpx;
            height: 200rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f7f7f7;
            margin: 20rpx 14rpx 0 0;

            image {
                width: 98rpx;
                height: 98rpx;
            }
            > view {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                > text {
                    line-height: 40rpx;
                }
            }
            > text {
                line-height: 40rpx;
            }
        }
        .upImgsF {
            position: relative;
            width: 200rpx !important;
            height: 200rpx !important;
            margin: 10rpx;
            > .upImg {
                width: 200rpx !important;
                height: 200rpx !important;
            }
            .uploadAgain {
                background: rgba(0, 0, 0, 0.3);
                position: absolute;
                top: 10%;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 24rpx;
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
                .again {
                    margin-top: 10rpx;
                }
            }
        }
        .upImgs {
            position: relative;
            width: 300rpx;
            height: 200rpx;
            margin: 10rpx;

            .uploadAgain {
                background: rgba(0, 0, 0, 0.3);
                position: absolute;
                top: 10%;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 24rpx;
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
                .again {
                    margin-top: 10rpx;
                }
            }
        }
        .uploadVideo {
            width: 380rpx;
            height: 200rpx;
            position: relative;
            margin: 20rpx 5rpx;

            .del {
                width: 35.25rpx;
                height: 35.25rpx;
                position: absolute;
                top: -10rpx;
                right: -10rpx;
                z-index: 1;
            }
            .upVio {
                width: 380rpx;
                height: 200rpx;
                border-radius: 20rpx;
            }
        }
    }
    .item:last-child {
        border: none;
    }
    .uploadAgain,
    .upload {
        border-radius: 20rpx;
    }
}
.card {
    width: 100%;
    background-color: white;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
}
.icon {
    width: 24rpx;
    height: 28rpx;
    margin: 0 10rpx;
}
.location {
    justify-content: end;
    .location_input {
        width: 35vw;
        word-break: break-all;
        text-align: left;
        line-height: 1.1rem;
    }
}
.required::before {
    content: "*";
    color: red;
    margin-right: 5rpx;
}
/deep/.input-placeholder,
.placeholder {
    color: #c5c5c5;
    font-size: 26rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.uni-input {
    width: 180rpx;
}
.upImg {
    width: 300rpx;
    height: 200rpx;
    margin: 20rpx 5rpx;
}
</style>